<template>
<!-- 主要复习拼接轮播图，伪类，动画等功能 -->
<div class="outer-box">
    <div class="politics-box">
    <!-- 头部 -->
    <div class="head-box">
      <div class="head-wicket">
        <img src="../images/politics/politics-wicket.png" alt="" />
        <button>点击进入-</button>
      </div>
      <div class="head-title">
        <div>
          <div class="title">广东政务服务一网通办</div>
          <div class="title-brief">少一趟奔波，为更好的生活</div>
        </div>
        <div class="search">
          <input type="text" placeholder="请输入您要办理的事项" />
          <span class="search-button">搜索</span>
        </div>
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="content-box">
      <!-- 左边内容 -->
      <div class="content-left-box">
        <div class="content-left-box-head">
          <div class="journalism">政策新闻</div>
          <div class="more">查看更多</div>
        </div>
        <div class="content-left-box-list">
          <ul>
            <li>
              <div class="list-content">
                中国红十字会总会,教育部联合迎接南非世界杯
              </div>
              <div class="list-time">2021-09-16</div>
            </li>
            <li>
              <div class="list-content">
                中国红十字会总会,教育部联合迎接南非世界杯
              </div>
              <div class="list-time">2021-09-16</div>
            </li>
            <li>
              <div class="list-content">
                中国红十字会总会,教育部联合迎接南非世界杯
              </div>
              <div class="list-time">2021-09-16</div>
            </li>
          </ul>
        </div>
        <div class="content-left-box-tail">
          <div class="content-box-tab">
            <div @click="touchTransit(0, 'left')">指尖办事</div>
            <div @click="touchTransit(1, 'left')">服务数据</div>
          </div>
          <div class="tab-string">
            <div
              class="red-string"
              :style="{ marginLeft: leftTransition }"
            ></div>
          </div>
          <div class="code">
            <div class="code-type">
              <div class="code-name">粤省事</div>
              <img
                src="../images/politics/粤省事码@2x.png"
                alt=""
                class="little-img"
              /><br />
              <span>更省事</span>
              <img
                src="../images/politics/粤省事码@2x.png"
                alt=""
                class="big-img"
              />
            </div>
            <div class="code-type">
              <div class="code-name">粤商通</div>
              <img
                src="../images/politics/粤商通码@2x.png"
                alt=""
                class="little-img"
              /><br />
              <span>服务平台</span>
            </div>
            <div class="code-type">
              <div class="code-name">粤政易</div>
              <img
                src="../images/politics/政务app码@2x.png"
                alt=""
                class="little-img"
              /><br />
              <span>政务协调</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="content-right-box">
        <div class="content-box-tab">
          <div @click="touchTransit(0, 'right')">特色创新</div>
          <div @click="touchTransit(1, 'right')">热门应用</div>
          <div @click="touchTransit(2, 'right')">热门应用</div>
          <div @click="touchTransit(3, 'right')">营商环境</div>
        </div>
        <div class="tab-string">
          <div
            class="red-string"
            :style="{ marginLeft: rightTransition }"
          ></div>
        </div>
        <div class="content-right-box-list">
          <div
            class="content-right-box-slide"
            :style="{ marginLeft: moveSlide }"
            ref="listBox"
          >
            <ul>
              <li>
                <div class="list-img">
                  <img src="../images/politics/02.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/03.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/04.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/05.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/06.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/07.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
            </ul>
            <ul>
              <li>
                <div class="list-img">
                  <img src="../images/politics/01.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/02.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/03.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/04.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/05.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/06.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
            </ul>
            <ul>
              <li>
                <div class="list-img">
                  <img src="../images/politics/07.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/01.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/02.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/03.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
            </ul>
            <ul>
              <li>
                <div class="list-img">
                  <img src="../images/politics/02.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/03.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/04.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/05.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/06.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
              <li>
                <div class="list-img">
                  <img src="../images/politics/07.png" alt="" />
                </div>
                <div class="list-content">
                  <div class="list-title">企业开办专区</div>
                  <div class="list-describe">
                    实现企业开办一表填报，一李斐莉雪
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="page-button" ref="pageBtn">
            <div @mouseover="hovering(0)" @mouseleave="withdrawSlide(0)"></div>
            <div @mouseover="hovering(1)" @mouseleave="withdrawSlide(1)"></div>
            <div @mouseover="hovering(2)" @mouseleave="withdrawSlide(2)"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="navigation-box">
      <div class="navigation-title">快捷入口</div>
      <ul>
        <li>统一身份认证</li>
        <li>统一咨询建议</li>
        <li>统一办件查询</li>
        <li>统一支付</li>
        <li>统一物流查询</li>
        <li>统一用户中心</li>
      </ul>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      leftTransition: "0px",
      rightTransition: "0px",
      moveSlide: "0px",
      timer: ""
    };
  },
  mounted() {
    let num = 1;
    this.withdrawSlide(num);
  },
  beforeDestroy() {

    clearInterval(this.timer);
  },
  destroyed(){
  },
  methods: {
    touchTransit(index, place) {
      if (place === "left") this.leftTransition = index * 110 + "px";
      else if (place === "right") this.rightTransition = index * 110 + "px";
    },
    hovering(index) {
      clearInterval(this.timer);
      this.slide(index);
    },

    slide(index) {
      let num = this.$refs.pageBtn.children.length;
      //   滑动块统一先变灰
      for (let i = 0; i < num; i++) {
        this.$refs.pageBtn.children[i].style.background = "#dfe1e2";
      }
      //   设置盒子轮播距离
      if (index === 3) {
        //后面加多一个ul障眼，下面tab滑块index为0
        this.$refs.pageBtn.children[0].style.background = "#4293f4";
        setTimeout(() => {
          this.$refs.listBox.style.transition = "0s";
          this.moveSlide = "0px";
        }, 1900); //在1s前快速切换为0px，下一张直接拼接第二张
      } else {
        // 鼠标悬停滑动块变蓝
        this.$refs.pageBtn.children[index].style.background = "#4293f4";
      }
      this.$refs.listBox.style.transition = "0.5s";
      this.moveSlide = -(index * 654) + "px";
    },
    withdrawSlide(index) {
      let num = index;
      this.timer = setInterval(() => {
        if (num > 3) {
          num = 1;
        }
        this.slide(num);
        num++;
      }, 2000);
    }
  }
};
</script>

<style lang="less" scoped>
.outer-box{//多出的外部可以用颜色,或者背景图在展示
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#abcff3, #ffff);
}
.politics-box {
  width: 1520px;
  height: 1500px;
  margin: 0 auto;
  padding: 0 253px;
  background-image: linear-gradient(#c5dbf2, #ffff);

  // 公共
  .content-box-tab {
    display: flex;
    div {
      height: 50px;
      line-height: 50px;
      margin-right: 46px;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #0d1c28;
      font-weight: 500;
      cursor: pointer;
    }
  }
  .tab-string {
    position: relative;
    height: 1px;
    background: #dfe1e2;
  }
  .red-string {
    width: 64px;
    position: absolute;
    top: -1px;
    height: 2px;
    background-color: red;
    transition: all 0.3s;
  }
  .head-box {
    padding: 32px 0 22px 0;

    .head-wicket {
      display: flex;
      align-items: center;
      img {
        width: 199px;
        height: 28px;
        vertical-align: text-bottom;
      }
      button {
        margin-left: 20px;
        width: 110px;
        height: 32px;
        background: #538fd7;
        border: none;
        cursor: pointer;
      }
    }
    .head-title {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      .title {
        margin: 22px 0 16px 0;
        width: 400px;
        height: 40px;
        font-family: PingFangSC-Semibold;
        font-size: 40px;
        color: #ffffff;
        letter-spacing: 0;
        line-height: 40px;
        font-weight: 600;
      }
      .title-brief {
        width: 400px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        font-size: 16px;
        letter-spacing: 12px;
        color: #3d4953;
        background: rgba(255, 255, 255, 0.6);
      }
      .search {
        input {
          width: 510px;
          height: 60px;
          line-height: 60px;
          font-size: 18px;
          padding-left: 1em;
          border: none;
          outline: none;
        }
        .search-button {
          width: 80px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          display: inline-block;
          font-size: 18px;
          color: #ffffff;
          background-color: #f13939;
          cursor: pointer;
        }
      }
    }
  }
  .content-box {
    display: flex;
    justify-content: space-between;
    .content-left-box {
      padding: 11px 20px 20px;
      width: 322px;
      height: 532px;
      background-color: #fff;
      .content-left-box-head {
        display: flex;
        justify-content: space-between;
        align-items: end;
        .journalism {
          padding-left: 8px;
          font-family: PingFangSC-Medium;
          font-size: 20px;
          color: #0d1c28;
          line-height: 26px;
          font-weight: 500;
          border-left: 3px solid #c40311;
        }
        .more {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #9ea4a9;
          line-height: 22px;
          font-weight: 400;
          cursor: pointer;
        }
      }
      .content-left-box-list {
        ul {
          margin: 21px 0 11px;
          li {
            padding: 7px 16px;
            width: 282px;
            height: 60px;
            background-color: #f6f8fa;
            margin-bottom: 9px;
            .list-content {
              margin-bottom: 6px;
              font-family: PingFangSC-Medium;
              font-size: 16px;
              color: #0d1c28;
              font-weight: 500;
              overflow: hidden; /*超出部分隐藏*/
              white-space: nowrap; /*不换行*/
              text-overflow: ellipsis; /*超出部分文字以...显示*/
            }
            .list-time {
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #9ea4a9;
              font-weight: 400;
            }
          }
        }
      }
      .content-left-box-tail {
        .code {
          margin-top: 18px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          width: 282px;
          height: 158px;
          background: #ecf4fd;
          .code-type {
            position: relative;
            text-align: center;
            .code-name {
              text-align: center;
              font-family: PingFangSC-Medium;
              font-size: 14px;
              color: #0d1c28;
              font-weight: 500;
            }
            .little-img {
              width: 75px;
              height: 75px;
            }
            .big-img {
              position: absolute;
              top: -5px;
              left: -154px;
              z-index: 999;
              display: none;
            }
            span {
              font-family: PingFangSC-Regular;
              font-size: 8px;
              color: #727475;
              font-weight: 40;
            }
            &:hover .big-img {
              display: block;
            }
          }
        }
      }
    }
    .content-right-box {
      padding: 0 20px;
      width: 674px;
      height: 532px;
      background: #ffffff;

      .content-right-box-list {
        overflow: hidden;
        .content-right-box-slide {
          width: 3500px;
          display: flex;
          ul {
            width: 634px;
            margin-bottom: 35px;
            display: flex;
            flex-wrap: wrap;

            li {
              margin: 20px 17px 0 0;
              width: 200px;
              height: 190px;
              background-color: #fff;
              box-shadow: 0px 0px 30px 0px rgba(9, 41, 77, 0.12);
              &:nth-child(3n) {
                margin-right: 0px;
              }
              .list-img {
                height: 113px;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
              .list-content {
                padding: 11px 17px 0;
                .list-title {
                  height: 32px;
                  line-height: 32px;
                  font-weight: 500;
                  font-family: PingFangSC-Medium;
                  font-size: 18px;
                  color: #0d1c28;
                }
                .list-describe {
                  font-family: PingFangSC-Regular;
                  font-size: 14px;
                  color: #767e85;
                  line-height: 20px;
                  font-weight: 400;
                  overflow: hidden; /*超出部分隐藏*/
                  white-space: nowrap; /*不换行*/
                  text-overflow: ellipsis; /*超出部分文字以...显示*/
                }
              }
            }
          }
          & ul:not(:first-child) {
            margin-left: 20px;
          }
        }

        .page-button {
          display: flex;
          justify-content: center;
          align-items: center;
          div {
            margin-right: 5px;
            width: 24px;
            height: 4px;
            background: #dfe1e2;
            cursor: pointer;

            &:nth-child(1) {
              background: #4293f4;
            }
          }
        }
      }
    }
  }
  .navigation-box {
    margin-top: 20px;
    padding: 20px;
    height: 126px;
    background: #ffffff;
    .navigation-title {
      width: 80px;
      height: 26px;
      text-align: center;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #0d1c28;
      line-height: 26px;
      font-weight: 500;
      border-left: 3px solid #c40311;
    }
    ul {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      li {
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        color: #4293f4;
        background: #beddfc;
        cursor: pointer;
      }
    }
  }
}
</style>
